<template>
  <div class="sigin">
    <van-cell-group class="sign-form">
      <van-field v-model="username" placeholder="请输入用户名" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/shouji@3x.png"/>
        <span>请输入用户名</span>
      </van-field>
      <van-field type="password" v-model="password" placeholder="请输入密码" class="sign-form-input">
        <img slot="label" class="sign-form-input-img" src="../../assets/images/mima@3x.png"/>
      </van-field>
      <div class="sign-form-input sign-form-tips">
        <van-checkbox v-model="checked" class="tips tips-left">记住密码</van-checkbox>
        <span class="tips tips-right" @click="goForgot()">忘记密码?</span>
      </div>
      <!-- <div class="sign-form-input"> -->
        <van-button type="primary" class="sign-form-input-sbtn" @click="login()">登录</van-button>
        <van-button type="primary" class="sign-form-input-rbtn" @click="register()">注册</van-button>
      <!-- </div> -->
    </van-cell-group>
  </div>
</template>

<script>
// import { login } from './../../api/login'
export default {
  name: 'sign-login',
  data () {
    return {
      // username: '',
      // password: '',
      checked: true
    }
  },
  computed: {
    username: {
      get () {
        return this.$store.state.permission.username
      },
      set (value) {
        this.$store.commit('updateUsername', value)
      }
    },
    password: {
      get () {
        return this.$store.state.permission.password
      },
      set (value) {
        this.$store.commit('updatePassword', value)
      }
    }
  },
  created () {
    localStorage.removeItem('menutab')
  },
  methods: {
    login () {
      if (this.username && this.password) {
        const phone = /^$|^((13[0-9])|(14[5-9])|(15[0-3,5-9])|166|(17[0-8])|(18[0-9])|(19[8,9]))\d{8}$/
        if (!phone.test(this.username)) {
          this.$toast.fail('用户名格式有误')
        } else {
          const params = {account: this.username, password: this.password}
          this.$store.dispatch('Logins', params).then(res => {
            if (res.code === 200) {
              this.$store.commit('updateUsername', this.username)
              this.$store.commit('updatePassword', this.password)
              this.$store.commit('SET_USER', res.data)
              localStorage.setItem('user', JSON.stringify(res.data))
              localStorage.setItem('loginInfo', JSON.stringify(params))
              localStorage.setItem('check', this.checked)
              this.$router.push({name: 'content'})
            } else {
              this.$toast.fail(res.msg)
            }
          }).catch((error) => {
            this.$toast.fail(error)
          //   this.loading = false
          })
        }
      } else if (!this.username) {
        this.$toast.fail('请填写用户名')
      } else if (!this.password) {
        this.$toast.fail('请填写密码')
      }
    },
    register () {
      this.$router.push({name: 'register'})
    },
    goForgot () {
      this.$router.push({name: 'forget'})
    }

  }

}
</script>
<style lang="stylus">
.sigin{
  .sign-form{
    .van-cell{
      padding 0px 10px
      border-bottom 1px solid rgba(216,216,216,1);
    }
    .van-field .van-cell__title{
      text-align left
    }
    .van-field{
      .van-cell__title{
        text-align: left;
      }
    }
  }
  .van-checkbox__icon{
    line-height 48px
    margin-left 5px
  }
  .van-checkbox__icon .van-icon{
    width 48px
    height 48px
    line-height 48px
    font-size 36px
  }
  .van-checkbox__icon--checked .van-icon{
    border .1px solid rgba(17,177,144,1)
    background rgba(17,177,144,1)
  }
}
</style>

<style lang="stylus" scoped>
left-image($url) {
  background-image url($url+"@2x.png");
  @media (-webkit-min-device-pixel-ratio:3),(min-device-pixel-ratio:3) {
   background-image:url($url+"@3x.png");
  }
}

.sigin{
  padding 48px
  position fixed
  top 100px
  width calc( 100% - 96px )
  .sign-form{
    padding-top 48px
    .sign-form-input{
      height 90px
      line-height 90px
      font-size 42px
      margin-bottom 36px
      .sign-form-input-img{
        height 52px
        vertical-align middle;
      }

    }
    .sign-form-input-sbtn{
      width:100%;
      height:120px;
      background:rgba(17,177,144,1);
      border-radius:10px;
      font-size 42px
      margin-top 52px
    }
    .sign-form-input-rbtn{
      width:100%;
      height:120px;
      background: white;
      border-radius:10px;
      border 2px solid rgba(17,177,144,1)
      color rgba(17,177,144,1)
      margin-top 42px
      font-size 42px
    }
    .sign-form-tips{
      font-size 42px
      color #999999
      overflow hidden
      padding-top 24px
      .tips-left{
        float left
      }
      .tips-right{
        float right
        cursor pointer
      }
    }
  }

}
</style>
